<template>
  <van-sticky>
    <van-nav-bar :left-text="getTitle()" @click-left="onClickLeft">
      <template #title>
        <p v-if="title" @click="onClickTitle()">
          {{ title }}
        </p>
      </template>
      <template #right>
        <div>
          <span
            v-if="
              !(
                (rightBtn.imgSrc && rightBtn.imgSrc.length) ||
                (rightBtn.iconName && rightBtn.iconName.length) ||
                rightBtn.textValue
              )
            "
          >
          </span>
          <img
            v-for="(item, index) in rightBtn.imgSrc"
            :key="item.id"
            :src="item"
            alt="icon"
            @click="handleImg(item, index)"
          />
          <van-icon
            size="20"
            v-for="(item, index) in rightBtn.iconName"
            :key="item.id"
            :name="item"
            @click="handleIcon(item, index)"
          />
          <van-button
            v-for="(item, index) in rightBtn.textValue"
            plain
            type="info"
            size="mini"
            :text="item"
            :key="item"
            @click="handleText(item, index)"
          />
        </div>
      </template>
    </van-nav-bar>
  </van-sticky>
</template>

<script>
import { Toast } from "vant";

export default {
  props: {
    title: {
      // 标题内容
      type: String,
      default: ""
    },
    backURL: {
      // 返回 url
      type: String,
      default: ""
    },
    rightBtn: {
      // 右侧按钮, 不传不显示
      type: Object,
      default: function() {
        return {
          number: 1,
          imgSrc: [
            // 选填, 图片地址 (按钮类型为img)
            //require("@/images/icon/search.png")
            // require('@/images/icon/search.png')
          ],
          iconName: [
            // 选填, 图标名称 (按钮类型为icon)
            "search"
            // 'ellipsis'
          ],
          textValue: "" // 选填, 文字 (建议两个汉字)
        };
      }
    }
  },
  methods: {
    onClickLeft() {
      if (this.backURL) {
        // this.$router.push(this.backURL);
        this.$router.replace(this.backURL);
      } else {
        // console.log(window.history.length);
        window.history.length > 1
          ? this.$router.go(-1)
          : this.$router.push("/");
      }
    },
    onClickTitle() {
      this.$emit("handleTitle");
    },
    // 右侧按钮-img
    handleImg(item, index) {
      this.$emit("handleImg", item, index);
    },

    // 右侧按钮-icon
    handleIcon(item, index) {
      this.$emit("handleIcon", item, index);
    },

    //右侧按钮-text
    handleText(item, index) {
      this.$emit("handleText", item, index);
    },

    getTitle() {
      return process.env.VUE_APP_ProjectName;
    }
  }
};
</script>

<style scoped lang="less"></style>
